<template>
  <view class="brand_detail_product-grid">
    <view class="brand_detail_product-item" v-for="item in products" :key="item.id">
      <view class="brand_detail_product-badge">
        <image class="brand_detail_badge-image"
          :src="badgeImage"
          mode="aspectFit"></image>
        <view class="brand_detail_badge-text">
          <view style="text-align: center;display: flex;justify-content:center;align-items:center;">  
            <text style="font-size: 20rpx;color: #D42A2A;">超值价￥</text>
            <text style="font-size: 28rpx;font-weight: 600;color: #D42A2A;">{{ item.price }}</text>
          </view>
          <view style="font-size: 20rpx;" class="brand_detail_badge-goumai">购买</view>
        </view>
      </view>
      <view class="brand_detail_product-image">
        <image :src="item.image" mode="aspectFit"></image>
      </view>
      <view class="brand_detail_product-info">
        <text class="brand_detail_product-title">{{ item.title }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ProductGrid',
  props: {
    // 商品列表数据
    products: {
      type: Array,
      required: true,
      default: () => []
    },
    // 徽章图片
    badgeImage: {
      type: String,
      default: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733997751675ab4b772d26.png'
    },
    // 购买按钮背景图
    buyButtonBg: {
      type: String,
      default: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734000679675ac02716d62.png'
    },
    // 商品卡片背景图
    cardBg: {
      type: String,
      default: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733997253675ab2c5cafff.png'
    }
  },
  emits: ['item-click']
}
</script>

<style>
.brand_detail_badge-goumai {
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734000679675ac02716d62.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  width: 56rpx;
  height: 56rpx;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #D42A2A;
}

.brand_detail_product-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50rpx;
  padding: 30rpx;
}

.brand_detail_product-item {
  position: relative;
  background: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  background-image: url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1733997253675ab2c5cafff.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 408rpx;
}

.brand_detail_product-badge {
  position: absolute;
  left: 50%;
  bottom: -30rpx;
  transform: translateX(-50%);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.brand_detail_badge-image {
  width: 256rpx;
  height: 64rpx;
}

.brand_detail_badge-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: space-around;

  width: 216rpx;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand_detail_badge-text text {
  font-size: 24rpx;
  color: #333;
  display: block;
}

.brand_detail_product-image {
  width: 100%;
}

.brand_detail_product-image image {
 width: 280rpx;
 height: 280rpx;
}

.brand_detail_product-info {
  margin-top: 20rpx;
  text-align: center;
}

.brand_detail_product-title {
  font-size: 28rpx;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
